<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    :width="width"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="dialog-content">
      <p>{{ message }}</p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">{{ cancelButtonText }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ confirmButtonText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { ElDialog, ElButton } from 'element-plus';

/**
 * @property props
 * @description 定义组件接收的属性。
 * @param {boolean} visible - 控制对话框的显示与隐藏。
 * @param {string} title - 对话框的标题。
 * @param {string} message - 对话框中显示的消息内容。
 * @param {string} [width='30%'] - 对话框的宽度。
 * @param {string} [confirmButtonText='确定'] - 确认按钮的文本。
 * @param {string} [cancelButtonText='取消'] - 取消按钮的文本。
 */
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '确认'
  },
  message: {
    type: String,
    default: '您确定要执行此操作吗？'
  },
  width: {
    type: String,
    default: '30%'
  },
  confirmButtonText: {
    type: String,
    default: '确定'
  },
  cancelButtonText: {
    type: String,
    default: '取消'
  }
});

/**
 * @property emits
 * @description 定义组件可以触发的事件。
 * @event confirm - 用户点击确认按钮时触发。
 * @event cancel - 用户点击取消按钮或关闭按钮时触发。
 */
const emits = defineEmits(['confirm', 'cancel']);

/**
 * @function handleConfirm
 * @description 处理确认按钮点击事件，触发 'confirm' 事件。
 */
const handleConfirm = () => {
  emits('confirm');
};

/**
 * @function handleCancel
 * @description 处理取消按钮点击事件，触发 'cancel' 事件。
 */
const handleCancel = () => {
  emits('cancel');
};

/**
 * @function handleClose
 * @description 处理对话框关闭事件（例如点击X按钮），触发 'cancel' 事件。
 */
const handleClose = () => {
  emits('cancel');
};
</script>

<style scoped>
.dialog-content {
  padding: 20px;
  text-align: center;
  font-size: 16px;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px 20px;
}
</style>